<template>
  <div class="nav">
    <nav
      :class="[
        'bg-gray-800 bg-white border-yellow border-b-4 fixed top-0 z-50 inset-x-0 bg-white shadow',
        navBorder
          ? 'bg-white shadow'
          : `${$route.path == '/' ? 'bg-transparent border-none' : ''}`,
      ]"
    >
      <div class="w-full max-w-[1432px] mx-auto px-2 sm:px-6 lg:px-8 flex">
        <div class="relative flex items-center justify-between h-16 flex-1">
          <div
            class="absolute inset-y-0 left-0 flex items-center sm:hidden"
            @click="showNav = !showNav"
          >
            <button
              type="button"
              style="color: #333"
              class="inline-flex items-center justify-center p-2 rounded-md text-gray-400 hover:text-white hover:bg-gray-700 focus:outline-none focus:ring-2 focus:ring-inset focus:ring-white"
            >
              <span class="sr-only">Open main menu</span
              ><svg
                xmlns="http://www.w3.org/2000/svg"
                fill="none"
                viewBox="0 0 24 24"
                stroke="currentColor"
                class="w-8"
              >
                <path
                  stroke-linecap="round"
                  stroke-linejoin="round"
                  stroke-width="2"
                  d="M4 6h16M4 12h16M4 18h16"
                ></path>
              </svg>
            </button>
          </div>
          <div
            class="flex-1 flex items-center justify-center sm:items-stretch sm:justify-start"
          >
            <div class="flex-shrink-0 flex items-center">
              <router-link aria-current="page" to="/"
                ><img
                  class="block h-8 w-auto"
                  alt="LUCKYBOXS"
                  src="@/assets/img/brand.png"
              /></router-link>
            </div>
            <div class="hidden sm:block sm:ml-auto">
              <div class="flex space-x-4">
                <router-link
                  to="/all-boxes"
                  :class="[
                    'text-black-70 hover:border-yellow hover:text-black-50 px-1 pt-1 border-b-2 no-underline font-bold border-transparent',
                  ]"
                  >All boxes</router-link
                ><router-link
                  to="/store"
                  class="text-black-70 hover:border-yellow hover:text-black-50 px-1 pt-1 border-b-2 no-underline font-bold border-transparent"
                  >Store</router-link
                ><router-link
                  to="/faq"
                  class="text-black-70 hover:border-yellow hover:text-black-50 px-1 pt-1 border-b-2 no-underline font-bold border-transparent"
                  >FAQ</router-link
                >
                <!-- 登录注册 -->
                <router-link
                  v-show="!userinfo.username"
                  to="/sign-in"
                  class="text-black-70 hover:border-yellow hover:text-black-50 px-1 pt-1 border-b-2 no-underline font-bold border-transparent"
                  >Login/Signup</router-link
                >
              </div>
            </div>
          </div>
        </div>
        <!---->
        <div
          v-show="userinfo.username"
          class="absolute inset-y-0 right-0 flex items-center pr-5 sm:static sm:inset-auto sm:ml-6 sm:pr-0 h-[64px]"
        >
          <div class="relative inline-block text-left">
            <div>
              <button
                id="headlessui-menu-button-3"
                type="button"
                aria-haspopup="true"
                aria-expanded="false"
                class="rounded block"
                @click="visible = !visible"
                @blur="onBlur"
              >
                <div class="flex avatar">
                  <img
                    width="38"
                    height="38"
                    viewBox="0 0 38 38"
                    fill="none"
                    :src="userinfo.avatar"
                  />
                  <!-- <path
                    d="M25 15C25 18.3137 22.3137 21 19 21C15.6863 21 13 18.3137 13 15C13 11.6863 15.6863 9 19 9C22.3137 9 25 11.6863 25 15Z"
                    fill="#FFFCF0"></path>
                  <path
                    d="M37 19C37 28.9411 28.9411 37 19 37C9.05887 37 1 28.9411 1 19C1 9.05887 9.05887 1 19 1C28.9411 1 37 9.05887 37 19Z"
                    fill="#FFFCF0"></path>
                  <path
                    d="M5.24207 30.6075C9.30533 28.3108 13.9996 27 19 27C24.0004 27 28.6947 28.3108 32.7579 30.6075M25 15C25 18.3137 22.3137 21 19 21C15.6863 21 13 18.3137 13 15C13 11.6863 15.6863 9 19 9C22.3137 9 25 11.6863 25 15ZM37 19C37 28.9411 28.9411 37 19 37C9.05887 37 1 28.9411 1 19C1 9.05887 9.05887 1 19 1C28.9411 1 37 9.05887 37 19Z"
                    stroke="#FFC700" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path> -->
                  <!-- </img> -->
                </div>
              </button>
            </div>
            <!---->
            <UserInfoModal :visible="visible"></UserInfoModal>
          </div>
          <div
            v-show="$route.path != '/'"
            class="balance flex items-center text-black-70 font-semibold relative select-none hidden sm:flex ml-6"
            data-v-b61a85bc=""
          >
            <div class="flex flex-col" data-v-b61a85bc="">
              <span class="text-sm" data-v-b61a85bc="">
                <span data-v-b61a85bc="">{{ userinfo.nickname }} </span>
              </span>
              <span class="text-variants-primary" data-v-b61a85bc=""
                >Ł <span data-v-b61a85bc="">{{ userinfo.money }}</span
                ><span class="text-xs" data-v-b61a85bc=""></span>
              </span>
            </div>
            <!---->
            <button
              class="text-yellow"
              data-v-b61a85bc-s=""
              @click="changePayModal(true)"
            >
              <svg
                width="57"
                height="56"
                viewBox="0 0 57 56"
                fill="none"
                xmlns="http://www.w3.org/2000/svg"
                class="ml-2.5"
                data-v-b61a85bc-s=""
              >
                <path
                  d="M27.5866 1.79256C28.8117 1.28509 30.1883 1.28509 31.4134 1.79256L47.032 8.262C48.2572 8.76947 49.2305 9.74284 49.738 10.968L56.2074 26.5866C56.7149 27.8117 56.7149 29.1883 56.2074 30.4134L49.738 46.032C49.2305 47.2572 48.2572 48.2305 47.032 48.738L31.4134 55.2074C30.1883 55.7149 28.8117 55.7149 27.5866 55.2074L11.968 48.738C10.7428 48.2305 9.76947 47.2572 9.262 46.032L2.79256 30.4134C2.28509 29.1883 2.28509 27.8117 2.79256 26.5866L9.262 10.968C9.76947 9.74284 10.7428 8.76947 11.968 8.262L27.5866 1.79256Z"
                  fill="#E5E7EB"
                ></path>
                <path
                  d="M9.99984 18.3327C12.301 18.3327 14.3843 17.3999 15.8924 15.8919C17.4004 14.3838 18.3332 12.3005 18.3332 9.99935C18.3332 7.69818 17.4004 5.61485 15.8924 4.10679C14.3843 2.59876 12.301 1.66602 9.99984 1.66602C7.69867 1.66602 5.61534 2.59876 4.10728 4.10679C2.59925 5.61485 1.6665 7.69818 1.6665 9.99935C1.6665 12.3005 2.59925 14.3838 4.10728 15.8919C5.61534 17.3999 7.69867 18.3327 9.99984 18.3327Z"
                  fill="#FFC700"
                  stroke="#FFC700"
                  stroke-width="1.5"
                  stroke-linejoin="round"
                ></path>
                <path
                  d="M10.0217 5L10.0086 15M5 10H15"
                  stroke="white"
                  stroke-width="2"
                  stroke-linecap="round"
                  stroke-linejoin="round"
                ></path>
                <path
                  fill-rule="evenodd"
                  clip-rule="evenodd"
                  d="M15 30.152C15 30.1417 15.0089 30.1361 15.0264 30.1348L15 30.152ZM15.0264 30.1348C15.5255 30.0974 22.9806 33.6338 26.7722 35.4684L45 23.6962L33.6076 18L15.0264 30.1348ZM30.5696 28.6329C32.8766 28.6329 34.7468 27.6128 34.7468 26.3545C34.7468 25.0961 32.8766 24.076 30.5696 24.076C28.2626 24.076 26.3924 25.0961 26.3924 26.3545C26.3924 27.6128 28.2626 28.6329 30.5696 28.6329Z"
                  fill="#9CA3AF"
                ></path>
                <path
                  d="M15 33.1904V31.2916L26.7722 36.6081L45 24.8359V26.7347L26.7722 38.5068L15 33.1904Z"
                  fill="#9CA3AF"
                ></path>
                <path
                  d="M15 36.2275V34.7085L26.7722 39.6452L45 27.873V29.7718L26.7722 41.5439L15 36.2275Z"
                  fill="#9CA3AF"
                ></path>
              </svg>
            </button>
          </div>
        </div>
      </div>
      <div class="sm:hidden" id="mobile-menu" v-if="showNav">
        <div class="pt-2 pb-4 space-y-1">
          <router-link
            to="/all-boxes"
            class="text-black-70 hover:border-yellow hover:text-black-70 block pl-3 pr-4 py-2 border-l-4 no-underline font-bold border-transparent"
            >All boxes</router-link
          ><router-link
            aria-current="page"
            to="/store"
            class="text-black-70 hover:border-yellow hover:text-black-70 block pl-3 pr-4 py-2 border-l-4 no-underline font-bold border-transparent"
            >Store</router-link
          ><router-link
            to="/faq"
            class="text-black-70 hover:border-yellow hover:text-black-70 block pl-3 pr-4 py-2 border-l-4 no-underline font-bold border-transparent"
            >FAQ</router-link
          >
          <router-link
            v-show="!userinfo.username"
            to="/sign-in"
            class="text-black-70 hover:border-yellow hover:text-black-70 block pl-3 pr-4 py-2 border-l-4 no-underline font-bold border-transparent"
            >Login/Signup</router-link
          >
        </div>
      </div>
      <!---->
      <RechargeModal></RechargeModal>
    </nav>
  </div>
</template>

<script>
import UserInfoModal from "./components/userInfoModal.vue";
import RechargeModal from "./components/rechargeModal.vue";
import { mapState, mapMutations } from "vuex";
export default {
  // 刷新vuex数据没了，重新存储一次
  created() {
    // let userinfo = JSON.parse(localStorage.getItem("userinfo"));
    this.$api.userinfos().then((res) => {
      if(res?.data?.data){
        this.setUserinfo(res?.data?.data);
      }
    });
  },
  computed: {
    ...mapState({
      userinfo: (state) => state.user.userinfo,
    }),
  },
  mounted() {
    const _this = this;
    _this.navBorder = window.scrollY >= 50;
    window.addEventListener("scroll", function (e) {
      if(window.innerWidth<640){
        _this.navBorder = true
      }else{
        _this.navBorder = window.scrollY >= 50;
      }
    });
  },
  components: {
    UserInfoModal,
    RechargeModal,
  },
  data() {
    return {
      showNav: false,
      navBorder: false,
      visible: false,
      curNav: 0,
    };
  },
  methods: {
    ...mapMutations({
      setUserinfo: "user/setUserinfo",
      changePayModal: "user/changePayModal",
    }),
    onBlur() {
      setTimeout(() => {
        this.visible = false;
      }, 300);
    },
  },
};
</script>

<style>
.router-link-active {
  border-color: rgba(255, 199, 0, 1) !important;
}
.avatar {
  border-radius: 50%;
  overflow: hidden;
}
</style>
